<script setup lang="ts">
import mapboxgl from "mapbox-gl";
import { onMounted } from "vue";
//引入语言包插件
import MapboxLanguage from "@mapbox/mapbox-gl-language";
import { bd09towgs84 } from "@/utils/PrjTrans.js";

//设置token
mapboxgl.accessToken =
  "XXXXXXXXXXXX";

let map = null;

onMounted(() => {
  map = new mapboxgl.Map({
    //指定用来装载地图的DOM容器的id
    container: "map",
    //街道地图
    style: "mapbox://styles/mapbox/streets-v12",
    // //户外地图
    // style: "mapbox://styles/mapbox/outdoors-v12",
    // //灰白色地图
    // style: "mapbox://styles/mapbox/light-v11",
    // //暗黑色地图
    // style: "mapbox://styles/mapbox/dark-v11",
    // //卫星地图，无注记
    // style: "mapbox://styles/mapbox/satellite-v9",
    // //卫星地图，有注记
    // style: "mapbox://styles/mapbox/satellite-streets-v12",
    // //导航地图，白天
    // style: "mapbox://styles/mapbox/navigation-day-v1",
    // //导航地图，夜晚
    //style: "mapbox://styles/mapbox/navigation-night-v1",

    //指定默认视图中心点的经纬度
    center: [106.55, 29.57],
    //指定默认视图的放大层级
    zoom: 9,
  });

  //将当前Mapbox底图的语言设置为中文简体
  const language = new MapboxLanguage({ defaultLanguage: "zh-Hans" });
  map.addControl(language);

  //添加导航条
  const nav = new mapboxgl.NavigationControl();
  map.addControl(nav, "top-right");
  //添加比例尺
  const scale = new mapboxgl.ScaleControl();
  map.addControl(scale, "bottom-left");

  //添加全屏按钮
  const fullScreen = new mapboxgl.FullscreenControl();
  map.addControl(fullScreen, "top-right");

  //默认样式加载完成后，添加图层
  map.on("style.load", () => {
    map.addSource("mapbox-dem", {
      type: "raster-dem",
      //这里加载mapbox官方提供的地形数据地址，可替换为自己的地形切片地址
      url: "mapbox://mapbox.mapbox-terrain-dem-v1",
      tileSize: 512,
      maxzoom: 14,
    });
    map.setTerrain({
      source: "mapbox-dem",
      //地形夸张比例，越大，起伏效果越明显
      exaggeration: 1.5,
    });
  });
});

//H5原生定位
function sourceLocation() {
  //判断浏览器是否支持定位组件
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (p) => {
        //获取经纬度
        const lat = p.coords.latitude;
        const lng = p.coords.longitude;

        //向mapbox地图中添加点图层
        const localPointSource = {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: [lng, lat],
                },
              },
            ],
          },
        };
        map.addSource("localPointSource", localPointSource);
        map.addLayer({
          id: "localPoint",
          type: "circle",
          source: "localPointSource",
          paint: {
            "circle-radius": 6,
            "circle-color": "#FF0000",
            "circle-stroke-color": "#FFFF00",
            "circle-stroke-width": 2,
          },
          filter: ["==", "$type", "Point"],
        });
        //地图视角缩放到定位点
        map.setZoom(14);
        map.setCenter([lng, lat]);
      },
      (err) => {
        console.log(err);
      }
    );
  } else {
    alert("当前浏览器不支持定位功能");
  }
}

//百度API定位
function baiduLocation() {
  const geolocation = new BMap.Geolocation();
  geolocation.enableSDKLocation();
  geolocation.getCurrentPosition((r: any) => {
    const lat = r.latitude;
    const lng = r.longitude;

    const p2 = bd09towgs84(lng, lat);

    //向mapbox地图中添加点图层
    const localPointSource = {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: p2,
            },
          },
        ],
      },
    };
    map.addSource("localPointSource", localPointSource);
    map.addLayer({
      id: "localPoint",
      type: "circle",
      source: "localPointSource",
      paint: {
        "circle-radius": 6,
        "circle-color": "#0c19aa",
        "circle-stroke-color": "#FFFF00",
        "circle-stroke-width": 2,
      },
      filter: ["==", "$type", "Point"],
    });

    map.setZoom(15);
    map.setCenter(p2);
  });
}
</script>

<template>
  <div id="map" class="map"></div>
  <div class="btn-box">
    <button @click="sourceLocation()">原生定位</button><br>
    <button @click="baiduLocation()">百度API定位</button>
  </div>
</template>

<style>
.map {
  flex: 1;
}
.btn-box {
  position: absolute;
  left: 20px;
  top: 20px;
}
</style>
